import Vue from 'vue'
import Vuex from 'vuex'
// import componentData from "../componentData/componentData";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 组件展示数据
    dragList: [],
    // 侧边栏渲染数据
    submenuList: [
      {
        icon: "el-icon-location",
        title: "图文类",
        subChild: [
          { icon: "el-icon-eleme", title: "轮播图", type: "Carousel" },
          { icon: "el-icon-s-platform", title: "单列图片", type: "ImgAlone" },
        ],
      },
    ],
  },
  mutations: {
    // 1.添加dragList
    adddragList(state, payload) {
      let { dragList } = state
      // 将其余popover隐藏
      dragList.forEach((item) => {
        item.popoverVisible = false;
      });
      // 添加组件
      dragList.push(payload);
      state.dragList = [...dragList]
    },

    //2. 删除dragList
    deldragList(state, payload) {
      let { dragList } = state
      dragList.splice(payload, 1)
      state.dragList = [...dragList]
    },

    //3. 切换组件选中edit展示状态
    changedragList(state, payload) {
      let { dragList } = state

      // 将其余popover隐藏
      dragList.forEach((item) => {
        item.popoverVisible = false;
      });
      dragList[payload].popoverVisible = true;
      state.dragList = [...dragList]

    },

    //4. 组件拖拽排序之后
    dragAfter(state,payload){
      state.dragList=[...payload]
    },

    // 5.edit更新draglist
    updateList(state,payload){
      let {dragList} =state
      let {index,content} =payload
      dragList[index].content=content
      state.dragList=[...dragList]
    }
  },
  actions: {
  },
  modules: {
  }
})
